<template>
  <div class="tabber-content flex-col">
    <div class="list-header flex-row">
      <div class="content-layout-left">数据列表</div>
      <div class="content-layout-right">
        <div>
          <el-radio-group v-model="radioIndex" size="small">
            <el-radio-button label="数据列表" value="1" />
            <el-radio-button label="字段列表" value="2" />
          </el-radio-group>
        </div>
        <span class="span-btn">···</span>
      </div>
    </div>
    <div class="list-content flex1">
      <data-table v-if="radioIndex === '数据列表'"></data-table>
      <data-meta v-else></data-meta>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import DataTable from "./component/dataTable.vue";
import DataMeta from "./component/dataMeta.vue";
// 单选默认选中
const radioIndex = ref("数据列表");
</script>

<style scoped lang="scss">
.tabber-content {
  height: 100%;
  width: 100%;
}
.list-header {
  height: 43px;
  border-bottom: 1px solid #e8e8e8;
  padding: 0px 15px 0px 10px;
  font-size: 13px;
  font-weight: 700;
}
.list-content {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}
</style>
